<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content="width=device-width,initial-scale=1,maximum-scale=1" name="viewport">
    <meta content="telephone=no,email=no,address=no" name="format-detection">
    <meta content="on" http-equiv="x-dns-prefetch-control">
    <meta name="renderer" content="webkit" />
    <meta name="keyword" content="" />
    <meta name="description" content="" />
    <title>feiling</title>
    <link rel="stylesheet" href="../../asset/vendor/video/video-js.min.css">
    <link rel="stylesheet" href="../../asset/css/main.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="../../asset/vendor/html5shiv.min.js"></script>
    <script src="../../asset/vendor/respond.min.js"></script>
    <script>
        alert("您的浏览器版本过低请升级！");
        location.href = "http://outdatedbrowser.com/zh-cn";
    </script>
    <![endif]-->
</head>
<body>
<!---header--->
<header id="header" class="header">
    <ul>
        <li class="special first">
            <a href="index.html">
                <img src="../../asset/images/basic/litter-title.png" alt="">
            </a>
        </li>
        <li>
            <a href="">People</a>
        </li>
        <li class="active">
            <a href="">Products</a>
        </li>
        <li>
            <a href="">Story</a>
        </li>
        <li>
            <a href="">News</a>
        </li>
        <li>
            <a href="">Contact</a>
        </li>
        <li class="special last">
            <a id="searchBtn" href="javascript:;"></a>
        </li>
    </ul>
</header>
<!--产品详情-->
<div class="product-detail">
    <div class="product-detail-cont">
        <div class="product-detail-title">
            <span>Products</span>
        </div>
        <div class="product-detail-slide" id="product-detail-slide">
            <div class="big-img" id="big-img">
                <ul>
                    <li><a href="javascript:;"><img src="../../asset/images/product-img-01.png" alt=""/></a></li>
                    <li><a href="javascript:;"><img src="../../asset/images/product-img-01.png" alt=""/></a></li>
                    <li><a href="javascript:;"><img src="../../asset/images/product-img-01.png" alt=""/></a></li>
                    <li><a href="javascript:;"><img src="../../asset/images/product-img-01.png" alt=""/></a></li>
                    <li><a href="javascript:;"><img src="../../asset/images/product-img-01.png" alt=""/></a></li>
                    <li><a href="javascript:;"><img src="../../asset/images/product-img-01.png" alt=""/></a></li>
                    <li><a href="javascript:;"><img src="../../asset/images/product-img-01.png" alt=""/></a></li>
                    <li><a href="javascript:;"><img src="../../asset/images/product-img-01.png" alt=""/></a></li>
                </ul>
                <div class="product-message">
                    <div class="top">
                        <div>Native Vegetal</div>
                        <div>Cells Essence</div>
                    </div>
                    <div class="bottom">
                        some description
                        some description
                        some description
                        some description
                    </div>
                </div>
                <div class="play-video-btn-cont">
                    <a id="play-video-btn" class="play" href="javascript:;">Play Product Video</a>
                </div>
                <div id="product-detail-video" class="product-detail-video">
                    <video
                            width="100%"
                            height="100%"
                            id="product-video"
                            class="video-js"
                            controls
                            preload="auto"
                            poster=""
                            data-setup='{}'>
                        <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
                        <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
                        <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
                        <p class="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a
                            web browser that
                            <a href="http://videojs.com/html5-video-support/" target="_blank">
                                supports HTML5 video
                            </a>
                        </p>
                    </video>
                    <a href="javascript:;" id="closeProductVideo" class="closeProductVideo"></a>
                </div>
            </div>
            <div class="small-img-cont">
                <div class="slide-btn slide-prev-btn" id="slide-prev-btn"></div>
                <div class="small-img" id="small-img">
                    <ul>
                        <li><a href="javascript:;"><img src="../../asset/images/product-img-01.png" alt=""/></a></li>
                        <li><a href="javascript:;"><img src="../../asset/images/product-img-01.png" alt=""/></a></li>
                        <li><a href="javascript:;"><img src="../../asset/images/product-img-01.png" alt=""/></a></li>
                        <li><a href="javascript:;"><img src="../../asset/images/product-img-01.png" alt=""/></a></li>
                        <li><a href="javascript:;"><img src="../../asset/images/product-img-01.png" alt=""/></a></li>
                        <li><a href="javascript:;"><img src="../../asset/images/product-img-01.png" alt=""/></a></li>
                        <li><a href="javascript:;"><img src="../../asset/images/product-img-01.png" alt=""/></a></li>
                        <li><a href="javascript:;"><img src="../../asset/images/product-img-01.png" alt=""/></a></li>
                    </ul>
                </div>
                <div class="slide-btn slide-next-btn" id="slide-next-btn"></div>
            </div>
        </div>
        <div class="product-detail-description">
            <div class="head">Product Specification</div>
            <div class="text">
                here is some product Specification
                here is some product Specification
                here is some product Specification
                here is some product Specification
                here is some product Specification
                here is some product Specification
                here is some product Specification
                here is some product Specification
                here is some product Specification
            </div>
        </div>
        <div class="product-detail-price-ewm">
            <div class="price">
                <div class="top">Price</div>
                <div class="bottom">5000 RMB</div>
            </div>
            <div class="ewm">
                <div class="img">
                    <img src="../../asset/images/ewm.jpg" alt="">
                </div>
                <div class="btn">
                    <a href="">Purchase</a>
                </div>
            </div>
        </div>
        <div class="product-detail-comment">
            <div class="comment-title">
                People Also Bought
            </div>
            <div class="comment-list">
                <div class="comment-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div>
                            <div class="top">
                                <div>Native Vegetal</div>
                                <div>Cells Essence</div>
                            </div>
                            <div class="bottom">
                                some description
                                some description
                                some description
                                some description
                            </div>
                        </div>
                    </div>
                </div>
                <div class="comment-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div>
                            <div class="top">
                                <div>Native Vegetal</div>
                                <div>Cells Essence</div>
                            </div>
                            <div class="bottom">
                                some description
                                some description
                                some description
                                some description
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="product-detail-mask"><span class="">Close</span></div>
</div>
<!---搜索--->
<div id="search" class="search">
    <div class="search-cont">
        <form class="search-from">
            <input type="text">
            <button class="search-btn">搜索</button>
        </form>
        <div class="search-list" id="search-list">
            <div id="scrollList">
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
<!--返回顶部-->
<a href="javascript:;" id="to-top"></a>
<script src="../../asset/vendor/jquery.min.js"></script>
<script src="../../asset/vendor/video/video.min.js"></script>
<script src="../../asset/vendor/jquery.slimscroll.min.js"></script>
<script src="../../asset/vendor/thumbnail-slide.js"></script>
<script src="../../asset/js/main.js"></script>
<script>
    $(function(){

        $('#product-detail-slide').banqh({
            box:"#product-detail-slide",//总框架
            pic:"#big-img",//大图框架
            pnum:"#small-img",//小图框架
            prev_btn:"#slide-prev-btn",//小图左箭头
            next_btn:"#slide-next-btn",//小图右箭头
            autoplay:true,//是否自动播放
            interTime:5000,//图片自动切换间隔
            delayTime:400,//切换一张图片时间
            order:0,//当前显示的图片（从0开始）
            picdire:true,//大图滚动方向（true为水平方向滚动）
            mindire:true,//小图滚动方向（true为水平方向滚动）
            min_picnum:5,//小图显示数量
            pop_up:false//大图是否有弹出框
        });

        //视频
        var player = videojs('product-video',{
            controls: false,
            autoplay: false,
            preload: "auto",
            loop: false,
            controlBar: {
                captionsButton: false,
                chaptersButton: false,
                playbackRateMenuButton: true,
                LiveDisplay: true,
                subtitlesButton: false,
                remainingTimeDisplay: true,

                progressControl: true,

                volumeMenuButton: {
                    inline: false,
                    vertical: true
                },
                fullscreenToggle: true
            }
        });
        var productVideo = $("#product-detail-video");
        var play = false;
        $("#play-video-btn").on("click",function(){
            if( !play ){
                productVideo.fadeIn();
                $(this).removeClass("play").addClass("pause");
                player.play();
            }else{
                productVideo.hide();
                player.pause();
                $(this).removeClass("pause").addClass("play");
            }
            play = !play;
        });

        $("#closeProductVideo").on("click",function(){
            productVideo.hide();
            player.pause();
            player.currentTime(0);
            play = false
        })


    });
</script>
</body>
</html>